const path = require('path')
const webpack = require('webpack')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HTMLPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const Host = require('./host.config')

module.exports = (env, argv) => {
    const isDev = argv.mode === 'development'
    const config = {
        mode: argv.mode,
        target: 'web',
        entry: path.join(__dirname, 'src/index.js'),
        output: {
            filename: 'bundle.[hash:8].js',
            path: path.join(__dirname, './dominate'),
            publicPath: Host.publicPath
        },
        resolve: {
            extensions: ['.js', '.vue', '.json'],
            alias: {
                '@': path.join(__dirname, 'src')
            }
        },
        module: {
            rules: [
                {
                    test: /\.(vue|js|jsx)$/,
                    loader: 'eslint-loader',
                    exclude: /node_modules/,
                    enforce: 'pre'
                },
                {
                    test: /\.vue$/,
                    loader: 'vue-loader'
                },
                {
                    test: /\.jsx$/,
                    loader: 'babel-loader',
                    exclude: /node_modules/
                },
                {
                    test: /\.js$/,
                    loader: 'babel-loader',
                    exclude: /node_modules/
                },
                {
                    test: /\.css/,
                    use: [
                        isDev ? 'vue-style-loader' : MiniCssExtractPlugin.loader,
                        'css-loader'

                    ]
                },
                {
                    test: /\.(c|sc|sa)ss/,
                    use: [
                        isDev ? 'vue-style-loader' : MiniCssExtractPlugin.loader,
                        'css-loader',
                        {
                            loader: 'postcss-loader',
                            options: {
                                sourceMap: true
                            }
                        },
                        'sass-loader',
                        {
                            loader: 'sass-resources-loader',
                            options: {
                                resources: [
                                    path.resolve(__dirname, './src/assets/scss/reset.scss'),
                                    path.resolve(__dirname, './src/assets/scss/mixin.scss')
                                ]
                            }
                        }
                    ],
                    include: path.join(__dirname, './src')
                },
                {
                    test: /\.(gif|jpg|jpeg|png|svg)$/,
                    use: [
                        {
                            loader: 'url-loader',
                            options: {
                                limit: 1024,
                                name: 'static/[name].[ext]'
                            }
                        }
                    ]
                },
                {
                    test: /\.(woff|woff2|eot|ttf|otf)$/,
                    use: [{
                        loader: 'file-loader',
                        options: {
                            name: '[path][name].[ext]'
                        }
                    }]
                }
            ]
        },
        plugins: [
            new VueLoaderPlugin(),
            new webpack.DefinePlugin({
                'process.env': {
                    NODE_ENV: JSON.stringify(argv.mode)
                }
            }),
            new HTMLPlugin({
                template: path.join(__dirname, './src/template.html')
            })
        ]
    }

    if (isDev) {
        config.devServer = {
            port: 4000,
            host: '0.0.0.0',
            overlay: {
                errors: true
            },
            headers: { 'Access-Control-Allow-Origin': '*' },
            historyApiFallback: {
                index: '/dominate/index.html'
            },
            hot: true
        }
        config.plugins.push(
            new webpack.HotModuleReplacementPlugin()
        )
    } else {
        config.entry = {
            app: path.join(__dirname, 'src/index.js')
        }
        config.output.filename = 'js/[name].[chunkhash:8].js'
        config.optimization = {
            splitChunks: {
                chunks: 'all'
            },
            runtimeChunk: true
        }
        config.plugins.push(
            new webpack.NamedChunksPlugin(),
            new MiniCssExtractPlugin({
                filename: 'css/[name].[contenthash:8].css'
            }),
            new CleanWebpackPlugin(
                ['dominate']
            )
        )
    }

    return config
}
